<template>
    <div class="schoolDynamicBox">
        <div class="title clearFix">
            <label>学校动态</label>
            <div class="btnSpace" v-if='userInfo.role_id == 6'>
                <label @click="goSpaceOthers">学校空间</label>
            </div>
        </div>

        <DynamicCommon :dynamicType='dynamicType'></DynamicCommon>
    </div>
</template>

<script>
    import DynamicCommon from '@/components/space/DynamicCommon'
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                userInfo: state => state.userModule.userInfo
            })
        },
        components:{
            DynamicCommon
        },
        created(){
            this.getSchoolclass()
        },
        data(){
            return{
                dynamicType: 50,
                schoolclassP: {}
            }
        },
        methods: {
            // 去他人空间 或者去对应机构空间
            goSpaceOthers() {
                console.log(this.schoolclassP)
                if (this.schoolclassP.schoolInfo  || this.schoolclassP.xxdm) {
                    if(this.schoolclassP.xxdm && this.schoolclassP.schoolInfo == null){
                        this.schoolclassP.schoolInfo = this.schoolclassP.xxdm
                    }
                    this.$store.commit('commonModule/INIT_STUDENTTOSPACE',true);
                    this.$store.commit('commonModule/INIT_ISMANAGER',false);
                    this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', this.schoolclassP.schoolInfo)
                    this.$router.replace({
                        path: "/school/schoolHomePage",
                        query: {
                            others: this.schoolclassP.schoolInfo
                        }
                    });
                } else{
                    this.$message.warning("学校信息有误，请先绑定学校！")
                }
            },
            getSchoolclass() {
                this.$store.dispatch('personalModule/getSchoolclass').then(res =>{
                    if(res){
                        this.schoolclassP = res
                    }
                })
            },
            errorHandler() {
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
.schoolDynamicBox{
    background-color: white;
    padding-bottom: 15px;
    .title{
        background-color: #f5f7fa;
        font-size: 14px;
        color: #303133;
        box-sizing: border-box;
        padding: 10px;
        text-align: left;
        .btnSpace{
            float: right;
            label{
                cursor: pointer;
                color: #409EFF;
                font-size: 14px;
            }
        }
    }
    .dynamicBox{
        box-sizing: border-box;
        padding: 0 10px;
        margin: 10px 0;

        .dynamicList{
            border: 1px solid #909399;
            box-sizing: border-box;
            padding: 10px 50px 10px 10px;
            margin-bottom: 20px;
            .userInfo{
                .avatar{
                    float: left;
                }
                .nameBox{
                    float: left;
                    text-align: left;
                    margin-left: 10px;
                    label{
                        display: block;
                    }
                    .time{
                        font-size: 12px;
                        color: #909399;
                        margin-top: 8px;
                    }
                    .userName{
                        font-size: 14px;
                        color: #409EFF;
                        margin-top: 5px;
                    }
                }
            }
            .dynamicContent{
                text-align: left;
                label{
                    color: #409EFF;
                }
                p{
                    overflow-wrap: anywhere;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    text-align: justify;
                    color: #303133;
                    font-size: 14px;
                    margin: 10px 0;
                }
                .contentBox{
                    margin-block-start: 0;
                    margin-block-end: 0;
                    padding-inline-start: 0;
                    list-style-type: none;
                    .imgBox{
                        width: 196px;
                        height: 196px;
                        float: left;
                        margin: 0 10px 10px 0;
                    }
                }
            }


        }

        .forwardBox{
            font-size: 14px;
            color: #909399;
            text-align: right;
            margin: 10px 0;
            label{
                cursor: pointer;
                span{
                    margin-left: 6px;
                }
            }
        }

        .inputBox{
            .btns{
                margin: 10px 0;
                .icons{
                    display: block;
                    float: left;
                    margin-top: 6px;
                    i{
                        font-size: 22px;
                        color: #409EFF;
                        margin-right: 15px;
                        cursor: pointer;
                    }
                }
                .btnPL{
                    display: block;
                    float: right;
                }
            }
        }

        .interaction{
            box-sizing: border-box;
            padding: 10px 15px;
            border-top: 1px solid #909399;
            .commentList{
                .avatar{
                    float: left;
                }
                .nameBox{
                    float: left;
                    text-align: left;
                    margin-left: 10px;
                    width: 855px;
                    p{
                        margin-block-start: 0;
                        margin-block-end: 0;
                        text-align: justify;
                        color: #303133;
                        font-size: 14px;
                        margin: 2px 0;
                        label{
                            color: #409EFF;
                        }
                    }
                    .imgBox{
                        width: 196px;
                        height: 196px;
                        margin: 5px 0;
                    }
                    .time{
                        color: #303133;
                        font-size: 12px;
                        margin-right: 10px;
                    }
                }
            }
            .huiFuComment{
                margin: 10px 0px 10px 40px;
                .huifu{
                    margin: 0 5px;
                }
            }
        }

    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>